import React, { ReactElement } from 'react';
import { View, Image, Text, ImageBackground } from 'react-native';
import { slice } from 'ramda';

import styles from './style';
import Button from '../../../../../../components/Button';
import { ROW_SHADOW_OPTIONS } from '../../../../../../constant/shadow';
import { CourseShowInfo } from '../../../../../../api/course/getUserCoursePage';
import CustomText from '../../../../../../components/Text';
import navigator from '../../../../../../util/navigator';
import { toolTipOpen } from '../../../../../../util/global';
import { avatar, subject } from '../../../../../../constant/resource';
import { dateToZhDate } from '../../../../../../util/transformDate';

export default ({
  name,
  startTime,
  duration,
  id,
  assistant,
  teacher,
  students,
  subjectName
}: CourseShowInfo): ReactElement => {
  let showStudents = slice(0, 4, students);
  if (students.length <= 5) {
    showStudents = students;
  }
  return (
    <Button
      needSVGShadow
      shadowStyle={[
        styles.shadow,
        students.length > 0 ? styles.haveTeacher : {}
      ]}
      shadowOptions={ROW_SHADOW_OPTIONS}
      style={[styles.container, students.length > 0 ? styles.haveTeacher : {}]}
      onPress={(): void => {
        if (students.length === 0) {
          toolTipOpen({ desc: '老师正在分班，请耐心等待' });
          return;
        }
        navigator.push('Course', { courseId: id });
      }}
    >
      <ImageBackground style={styles.tagContent} source={subject}>
        <Text style={styles.tag}>{subjectName}</Text>
      </ImageBackground>
      <CustomText style={styles.name} numberOfLines={1}>
        {name}
      </CustomText>
      <CustomText style={styles.time}>
        {students.length > 0
          ? `开课时间：${dateToZhDate(startTime)}`
          : `主讲：${teacher ? teacher.name : '暂未分配'}`}{' '}
        共{duration}讲
      </CustomText>

      {students.length > 0 ? (
        <View style={styles.loadBottomInfo}>
          {teacher && (
            <View style={styles.teacherContent}>
              <Image
                style={styles.teacherIcon}
                source={teacher.headUrl ? { uri: teacher.headUrl } : avatar}
              />
              <Text style={styles.teacherName}>主讲老师</Text>
            </View>
          )}
          {teacher && (
            <View style={styles.addContent}>
              <Text style={styles.add}>+</Text>
            </View>
          )}
          {assistant && (
            <View style={styles.teacherContent}>
              <Image
                style={styles.teacherIcon}
                source={assistant.headUrl ? { uri: assistant.headUrl } : avatar}
              />
              <Text style={styles.teacherName}>辅导老师</Text>
            </View>
          )}
          {assistant && (
            <View style={styles.addContent}>
              <Text style={styles.add}>+</Text>
            </View>
          )}
          <View style={styles.studentContent}>
            <View style={styles.studentList}>
              {showStudents.map(
                (student): ReactElement => (
                  <Image
                    key={student.id}
                    source={student.headUrl ? { uri: student.headUrl } : avatar}
                    style={styles.studentIcon}
                  />
                )
              )}
            </View>
            <Text style={styles.teacherName}>我的班级同学</Text>
          </View>
          {students.length > 5 && (
            <Text style={styles.all}>等{students.length}名同学</Text>
          )}
        </View>
      ) : (
        <Text style={styles.noTeacherDesc}>暂未分班</Text>
      )}
    </Button>
  );
};
